<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.8.0.min.js"></script>
</head>


<div id="step">
    <div step="1" >111</div>
    <div step="2" style="display: none" >222</div>
    <div step="3"  style="display: none" >333</div>
    <div step="4"  style="display: none" >444</div>
    <div step="5"  style="display: none" >555</div>
    <div><button >go next</button></div>
</div>
<script>

    var step = 2;
    $('#step button').click(function(){
        $("#step").find("div[step]").hide();
        $("#step").find("div[step="+step+"]").show();
        step+=1;
        if($("#step").find("div[step="+step+"]").length == 0){
            $(this).text('done');
            $(this).unbind('click');   
        }

    })

</script>


</body>
</html>